// Import bootstrap and font awesome stylesheets
@import "../../libs/bootstrap/less/bootstrap.less";
@import "../../libs/font-awesome/less/font-awesome.less";
@import (inline) "../../libs/guanlecoja-ui/styles.css";
@fa-font-path: "./fonts";
/* base css for angular, don't display anything until angular is running */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* modal dialog customizations */
@media screen {
  .modal-xlg {
    .modal-dialog {
        width: 90%;
    }
    /*Sets the maximum height of the modal body to 80% of the screen height*/
    .modal-body {
        overflow-y: auto;
        max-height: 80vh;
    }
  }

  /* border-radius looks strange for navbar,
     on lower screen sizes it is 0 by default */
  .navbar-static-top {
    border-radius: 0;
  }
}

/* make the sidebar be on the back of the modals dialog */
.sidebar {
    z-index: (@zindex-modal - 1) !important;
}

/* button bar inside the breadcrum, used for forcesched buttons */
.breadcrumb .btn {
  height: 29px;
  margin-top: -5px;
  padding-top: 4px;
}

.breadcrumb > li + li.pull-right:before {
  content: " ";
  padding: 0 2px;
}

/* status badge */
.badge-status {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: @font-size-small;
  font-weight: @badge-font-weight;
  line-height: @badge-line-height;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  border-radius: @badge-border-radius;
  transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
  .badge-active{
      display: none;
  }
  &:hover,
  &:focus {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    .badge-active{
        display: inline-block;
    }
    .badge-inactive{
        display: none;
    }
  }
}


.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.select-content {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* https://danoc.me/blog/css-prevent-copy/
Firefox will insert newlines if the selection go over a no-select span, so we need to implement them with ::before
*/
[data-linenumber-content]::before,
[data-linenumber-content--before]::before,
[data-linenumber-content--after]::after {
  content: attr(data-linenumber-content);
  color: #c7c7c7;
  padding-right: 10px;
}

.avatar {
  background-size: 32px 32px;
  border-radius: 50%;
  display: block;
  margin: -10px;
  height: 40px;
  width: 40px;
  overflow: hidden;
  img {
    height: 40px;
    width: 40px;
    background-color: #ccc
  }
}

.change-avatar {
  background-size: 16px 16px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
  height: 20px;
  width: 20px;
  overflow: hidden;
  img {
    height: 20px;
    width: 20px;
    background-color: #ccc
  }
}

li.unstyled{
  list-style: none;
}
.no-margin{
  margin: 0px !important;
}
.mouse-over-only  {display: none;}
span:hover>.mouse-over-only  {display: inline;}

/* flex row will make the row grow automatically given the size of the content
   This will make sure all the inside div will fill all content.
   This is useful when you want to create a row with one left and one right
   the level of grow give the importance of the div. The more it has grow the more it will win
   space when fighting against the other divs
   You can use it with following jade code:
   .flex-row
      .flex-grow-1  left content
      .flex-grow-1
          .pull-right right content

*/
.flex-row {
  display: flex;
  flex-flow: row;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
    .flex-grow-1 {
        flex-grow: 1
    }
    .flex-grow-2 {
        flex-grow: 2
    }
    .flex-grow-3 {
        flex-grow: 3
    }
    .flex-grow-4 {
        flex-grow: 4
    }
}
